<!-- 投诉/商务合作通用组件 -->
<template>
	<view class="enter">
		<view class="box">
			<view class="bg">
			</view>
			<view class="content">
				<view class="item">
					<view>姓名</view>
					<u--input placeholder="请输入姓名" v-model.trim="dto.name" border="none" inputAlign="right"
						maxlength='10'></u--input>
				</view>
				<view class="item">
					<view>联系方式</view>
					<u--input placeholder="请输入联系方式" v-model.trim="dto.phone" border="none" maxlength='11'
						inputAlign="right">
					</u--input>
				</view>
				<view class="item">
					<view>投诉类型</view>
					<view class="right" @click="showType = true">
						<text class="type" v-if="dto.feedbackType == ''">请选择</text>
						<text v-else class="type black">{{dto.feedbackTypeTxt}}</text>
						<image class="img" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img7.png"></image>
					</view>
				</view>
				<view class="items">
					<view class="title">投诉内容</view>
					<u--textarea confirmType="done" v-model="dto.feedbackContent" autoHeight placeholder="请输入"
						maxlength="200" count class="text_area" height="400" ></u--textarea>
				</view>

				<view class="submit" @click="submit">提交</view>

			</view>
		</view>

		<!-- 类型选择 -->
		<u-picker title="投诉类型" :show="showType" keyName="dictLabel" :columns="columns" @cancel="showType = false"
			@confirm='confirm' :itemHeight="100"></u-picker>

		<success-pop :show="show" text="提交成功"></success-pop>
	</view>
</template>

<script>
	import {
		commonsType,
		submitOpinion
	} from '@/apis/apis.js'
	import successPop from '@/components/successPopup.vue'
	export default {
		components: {
			successPop
		},
		data() {
			return {
				showType: false,
				show: false,
				columns: [],
				dto: {
					"memberId": null,
					"name": "",
					"phone": "",
					"feedbackType": "",
					"feedbackTypeTxt": "",
					"feedbackContent": "",
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				// 字典获取
				commonsType('sys_feedback_type').then(res => {
					console.log(res)
					this.columns = [res.data]
				})
			},
			back() {
				uni.navigateBack();
			},
			confirm(e) {
				console.log(e)
				this.dto.feedbackType = e.value[0].dictCode
				this.dto.feedbackTypeTxt = e.value[0].dictLabel
				this.showType = false;
			},
			submit() {
				const memberId = uni.getStorageSync('USER_DATA').memberId
				this.dto.memberId = memberId
				const boo = this.validation()
				if (boo) {
					submitOpinion(this.dto).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.show = true
							setTimeout(() => {
								this.show = false
								uni.navigateBack()
							}, 1500)
						}
					})
				}
			},
			// 校验
			validation() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.dto.name) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.dto.phone) {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none'
					})
					return
				}
				if (!reg.test(this.dto.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (!this.dto.feedbackType) {
					uni.showToast({
						title: '请选择投诉类型',
						icon: 'none'
					})
					return
				}
				if (!this.dto.feedbackContent) {
					uni.showToast({
						title: '请填写投诉内容',
						icon: 'none'
					})
					return
				}
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.enter {
		background-color: #F4F6F8;


		.box {
			position: relative;
			width: 100%;

			.bg {
				height: 156rpx;
				background-color: #194FC9;
				border-radius: 0 0 30rpx 30rpx;
			}
		}

		.content {
			position: absolute;
			top: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 0 36rpx 64rpx;

			.submit {
				width: 636rpx;
				height: 90rpx;
				background: #194FC9;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				margin-top: 120rpx;
			}

			.items {
				width: 100%;
				padding: 56rpx 14rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;

				&>.title {
					margin-bottom: 44rpx;
				}

				.text_area {
					background-color: #F8F8F8;
				}

			}

			.item {
				padding: 56rpx 14rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F1F1F1;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;

				.right {
					text-align: right;

					.type {
						color: #c0c4cc;
						margin-right: 16rpx;
					}

					.black {
						color: black;
					}
				}

				view {
					width: 50%;
				}

				.img {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.description {
				display: contents;

				&>.title {
					margin: 56rpx 0 44rpx;
				}

				.text {
					background-color: #F8F8F8;
					width: 100%;
					height: 238rpx;
				}
			}
		}
	}
</style>
